<template>
  <div id="userLayout">
    <div class="login_panle">
      <div class="login_panle_form">
        <div class="login_panle_form_title">
          <img class="login_panle_form_title_logo" src="https://www.gin-vue-admin.com/img/logo.png" alt />
          <p class="login_panle_form_title_p">xGn-Vue-admin</p>
        </div>
        <el-form ref="ruleForm" :model="loginForm" :rules="loginRules" @submit="login">
            <el-form-item prop="username">
              <el-input prefix-icon="el-icon-user" v-model="loginForm.username" type="text" placeholder="请输入用户名" clearable></el-input>
            </el-form-item>
            <el-form-item prop="password" >
              <el-input prefix-icon="el-icon-lock" v-model="loginForm.password" type="password" placeholder="请输入密码" 
              show-password @keyup.enter.native="login"></el-input>
            </el-form-item>
            <el-form-item style="margin-top: -15px;">
              <div style="display: flex;justify-content:space-between;">
                <el-checkbox-group v-model="loginForm.type">
                  <el-checkbox label="记住账号" name="type"></el-checkbox>
                </el-checkbox-group>
                <div>
                    <span style="color: #0052D9">忘记密码？</span>
                </div>
              </div>
            </el-form-item>
            <!-- <el-form-item style="position: relative" prop="captcha">
              <el-input v-model="loginForm.captcha" name="logVerify" placeholder="请输入验证码" style="width: 60%"/>
              <div class="vPic">
                <img v-if="picPath" :src="picPath" alt="请输入验证码" />
              </div>
            </el-form-item> -->
            <el-form-item>
              <el-button type="primary" style="width: 100%;font-size:18px;" :loading="isloading" @click="login">{{isloading == true ? "登录中" : "登 录"}}</el-button>
              <!-- <el-button style="width: 46%;font-size:18px;margin-left: 8%" @click="resetForm('ruleForm')">重 置</el-button> -->
            </el-form-item>
        </el-form>
      </div>
      <div class="login_panle_right" />
      <div class="login_panle_foot">
        <div class="links">
          <a href="https://gitee.com/guan-fushang/git-xiaodiAdmin">
            <img src="../../assets/logo/docs.png" class="link-icon">
          </a>
          <a href="https://www.yuque.com/flipped-aurora/">
            <img src="../../assets/logo/yuque.png" class="link-icon">
          </a>
          <a href="https://gitee.com/guan-fushang/git-xiaodiAdmin">
            <img src="../../assets/logo/github.png" class="link-icon">
          </a>
          <a href="https://space.bilibili.com">
            <img src="../../assets/logo/video.png" class="link-icon">
          </a>
        </div>
        <div class="copyright">
          <bootomInfo />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import { getMenu } from 'network/permission.js'
import bootomInfo from "@/layout/bottomInfo/bottomInfo.vue";
export default {
  name: "Login",
  components: {
    bootomInfo,
  },
  data() {
    const validateUsername = (rule, value, callback) => {
      if (value.length < 2) {
        callback(new Error('请输入正确的用户名'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能少于6位'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: "",
        password: "",
        type:""
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      isloading: false
    };
  },
  methods: {
    // login() {
    //   getMenu(this.form)
    //     .then(res => {
    //       if(res.data.code === -999) {
    //         this.$message.error(res.data.data.message)
    //         return
    //       } else {
    //         this.$message({
    //           message: '登录成功',
    //           type: 'success'
    //         });
    //         this.$router.push('/main/home')
    //       }
    //     }, err => {
    //       console.log(err);
    //     })
    // }
    login() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.isloading = true
          this.$http.post('api/permission/getMenu', this.loginForm).then( res =>{
            console.log(res);
            res = res.data
            if (res.code == 200) {
              this.$message({  message: '登录成功', type: 'success'});
              // this.$notify({ title: '登录成功', type: 'success'});
              this.$store.commit('clearMenu');
              this.$store.commit('setMenu',res.data.menu);
              this.$store.commit('setToken',res.data.token);
              this.$store.commit('addMenu',this.$router);
              this.$router.push({name: 'home'});
              this.isloading = false;
            } else {
              this.$message.warning(res.data.message);
              this.isloading = false;
            }
           })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
};
</script>
<style scoped>
#userLayout {
  margin: 0;
  padding: 0;
  background-image: url("../../assets/logo/login_background.jpg");
  background-size: cover;
  width: 100%;
  height: 100%;
  position: relative;
}
#userLayout .input-icon {
  padding-right: 6px;
  padding-top: 2px;
}
.login_panle {
  position: absolute;
  top: 3vh;
  left: 2vw;
  width: 96vw;
  height: 94vh;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.login_panle_right {
  background-image: url("../../assets/logo/login_left.svg");
  background-size: cover;
  width: 40%;
  height: 60%;
  float: right !important;
}
.login_panle_form {
  width: 450px;
  background-color: #fff;
  padding: 50px 50px;
  padding-top: 0px;
  border-radius: 10px;
  /* box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.2); */
}
.login_panle_form_title {
  display: flex;
  align-items: center;
  margin: 30px 0;
}
.login_panle_form_title_logo {
  width: 90px;
  height: 72px;
}
.login_panle_form_title_p {
  font-size: 40px;
  padding-left: 20px;
}
 .vPic {
  width: 33%;
  height: 38px;
  float: right !important;
  background: #ccc;
}
.vPic img {
  width: 100%;
  height: 100%;
  cursor: pointer;
  vertical-align: middle;
}
.login_panle_foot {
  position: absolute;
  bottom: 20px;
}
.login_panle_foot .links {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.link-icon {
  width: 30px;
  height: 30px;
}
.copyright {
  color: #777777;
  margin-top: 5px;
}

/* 小屏幕不显示右侧，将登陆框居中 */
@media (max-width: 750px) {
  .login_panle_right {
    display: none;
  }
  .login_panle {
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
  }
  .login_panle_form {
    width: 100%;
  }
}

/*
  powerBy : bypanghu@163.com
*/
/* @import "@/assets/style/newLogin.scss"; */
</style>
<style>
  .login_panle_form .el-input__inner{
     /* padding: 0px 40px; */
  }
</style>